<template>
	<div class="card icons-demo">
		<h4>图标</h4>
		<p>Avalon使用PrimeTek新的现代图标库PrimeIcons v4.0。</p>

		<h5>入门</h5>
		<p>PrimeIcons使用pi pi- {icon}语法，例如pi pi-check。可以使用诸如i或span之类的元素来显示独立图标。</p>
<CodeHighlight>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
</CodeHighlight>

		<i class="pi pi-check" style="margin-right: .5rem"></i>
		<i class="pi pi-times"></i>

		<h5>组件图标</h5>
		<p>具有图标属性的组件使用pi pi- {icon}语法接受PrimeIcons。</p>
<CodeHighlight>
&lt;Button label="确认" icon="pi pi-check"&gt;&lt;/Button&gt;
</CodeHighlight>

		<Button label="确认" icon="pi pi-check"></Button>

		<h5>尺寸</h5>
		<p>使用font-size属性可以轻松更改图标的大小。</p>

<CodeHighlight>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
</CodeHighlight>

		<i class="pi pi-check"></i>

<CodeHighlight>
&lt;i class="pi pi-check" style="fontSize: 2rem"&gt;&lt;/i&gt;
</CodeHighlight>

		<i class="pi pi-check" style="fontSize: 2rem"></i>

		<h5>旋转动画</h5>
		<p>特殊的pi-spin类将连续旋转应用于图标。</p>
<CodeHighlight>
&lt;i class="pi pi-spin pi-spinner" style="fontSize: 2rem"&gt;&lt;/i&gt;
</CodeHighlight>

		<i class="pi pi-spin pi-spinner" style="fontSize: 2rem"></i>

		<h5>图标列表</h5>
		<p>这是PrimeIcons的当前列表，会定期添加更多图标。您也可以在问题跟踪器中请求新图标。</p>

		<div class="p-grid icons-list">
			<div class="p-col-12 p-md-2" v-for="icon of icons" :key="icon.properties.name">
				<i :class="'pi pi-' + icon.properties.name"></i>
				<div>pi-{{icon.properties.name}}</div>
			</div>
		</div>

	</div>
</template>

<script>
import CodeHighlight from "@/components/CodeHighlight";
import axios from 'axios';

export default {
	data() {
		return {
			icons: null
		}
	},
	mounted() {
		axios.get('assets/demo/data/icons.json').then(res => {
			let icons = res.data.icons;
			icons.sort((icon1, icon2) => {
				if(icon1.properties.name < icon2.properties.name)
					return -1;
				else if(icon1.properties.name < icon2.properties.name)
					return 1;
				else
					return 0;
			});
			this.icons = icons;
		});
	},
	components: {
		'CodeHighlight': CodeHighlight
	}
}
</script>

<style scoped lang="scss">
.icons-list {
	text-align: center;
	color: #6c757d;

	.p-md-2 {
		padding: 1em;
	}
}

.icons-list i {
	font-size: 1.5rem;
	margin-bottom: .5rem;
}

/deep/ pre[class*="language-"] {
	&:before, &:after {
		display: none !important;
	}

	code {
		border-left: 10px solid var(--surface-d) !important;
		box-shadow: none !important;
		background: var(--surface-b) !important;
		margin: 1em 0;
		color: var(--text-color);
		font-size: 14px;

		.token {
			&.tag,
			&.keyword {
				color: #2196F3 !important;
			}

			&.attr-name,
			&.attr-string {
				color: #2196F3 !important;
			}

			&.attr-value {
				color: #4CAF50 !important;
			}

			&.punctuation {
				color: var(--text-color);
			}

			&.operator,
			&.string {
				background: transparent;
			}
		}
	}
}
</style>
